<template>
  <div class="tab-bar">
    <div v-for="(item, index) in tabList" :key="index" @click="switchTab(index)" :class="item.active ? 'tab-active' : 'tab-item'">
      <img :src="item.active ? item.selectedIconPath : item.iconPath" alt="" />
      <div class="tab-text">{{item.text}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        {
          "pagePath": "pages/home/index",
          "text": "首页",
          "iconPath": "./static/home.png",
          "selectedIconPath": "./static/homea.png",
          "active": false
        },
        {
          "pagePath": "pages/study/index",
          "text": "学习中心",
          "iconPath": "./static/study.png",
          "selectedIconPath": "./static/studya.png",
          "active": false
        },
        {
          "pagePath": "pages/live/index",
          "text": "直播",
          "iconPath": "./static/study.png",
          "selectedIconPath": "./static/studya.png",
          "active": false
        },
        {
          "pagePath": "pages/user/index",
          "text": "个人中心",
          "iconPath": "./static/user.png",
          "selectedIconPath": "./static/usera.png",
          "active": false
        }
      ]
    }
  },
  methods: {
    switchTab(index) {
      const tabList = this.tabList.map(item => {
        item.active = false;
        return item;
      });
      tabList[index].active = true;
      this.tabList = tabList;
      uni.switchTab({
        url: '/' + this.tabList[index].pagePath
      });
    }
  },
  mounted() {
    // 设置当前tab为选中状态
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1].route;
    const tabList = this.tabList.map(item => {
      item.active = false;
      if (item.pagePath === currentPage) {
        item.active = true;
      }
      return item;
    });
    this.tabList = tabList;
  }
}
</script>

<style scoped>
.tab-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background-color: #fff;
  box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.1);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-active {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center
}
</style>